<template>
    <div class="page">
        <nav-top style="position:sticky; top: 0; left: 0;right: 0;"></nav-top>
        <div class="ball1 bg"></div>
        <div class="ball2 bg"></div>
        <div class="ball3 bg"></div>
        <div class="ball4 bg"></div>
        <div class="ball5 bg"></div>
        <div class="ball6 bg"></div>
        <div class="ball7 bg"></div>
        <div class="bg1 bg"></div>
        <div class="bg2 bg"></div>
        <div class="bg3 bg"></div>
        <div class="bg4 bg"></div>
        <div class="bg5 bg"></div>
        <div class="bg6 bg"></div>
        <div class="bg7 bg"></div>
        <div class="main">
            <div class="banner" v-if="bannerList && bannerList.length > 0">
                <banner-dom :list="bannerList"></banner-dom>
            </div>

            <div class="list">
                <div class="top">
                    <span class="type">全部</span>
                    <select-input :typeList="typeList" width="1.95rem" :placeholder="new Date().getFullYear()"
                        color="#7709CC" @message="YearChange"></select-input>
                </div>
                <ul class="item-list" v-if="list && list.length > 0">
                    <li v-for="item in list" :key="item" class="mouse-active" @click="linkUrl(item.link_url)">
                        <div class="date">
                            <div class="year">{{ date(item.releaseTime).year }}</div>
                            <div class="month">{{ date(item.releaseTime).month }}</div>
                            <div class="week" :data-week="date(item.releaseTime).week"></div>
                            <div class="day">{{ date(item.releaseTime).day }}</div>
                        </div>
                        <div class="content">
                            <div class="title">{{ item.title }}</div>
                            <div class="text">
                                <p>{{ item.content }}</p>
                            </div>
                        </div>
                        <div class="image">
                            <el-image :src="item.pic" fit="cover"></el-image>
                        </div>
                    </li>
                </ul>
                <my-pagination :pageSize="pageSize" :total="total" @message="pageChange" :page="params.pageNum"
                    v-if="list && list.length > 0"></my-pagination>
            </div>
            <my-empty v-if="!list || list.length <= 0"></my-empty>
        </div>
    </div>
</template>

<script>
import navTop from "@/components/common/nav-top";
import bannerDom from "@/components/banner";
import selectInput from "@/components/common/select-input";
import myPagination from "@/components/common/my-pagination";
import myEmpty from "@/components/common/empty";
import { news, banner } from '@/request/api'
export default {
    name: "officalNotice",
    components: {
        navTop,
        bannerDom,
        selectInput,
        myPagination,
        myEmpty
    },
    data() {
        return {
            typeList: [],
            list: [],
            pageSize: 5,
            total: 10,
            params: {
                pageNum: 1,
                pageSize: 5,
                year: ''
            },
            bannerList: []
        }
    },
    mounted() {
        this.picker();
        this.getList();
        this.banners()
    },
    methods: {
        weeks(v) {
            var a = new Array("日", "一", "二", "三", "四", "五", "六");
            var week = new Date(v).getDay();
            var str = a[week];
            return str
        },
        picker() {
            let num = new Date();
            let y = num.getFullYear();
            let l = [];
            for (let i = 1970; i <= y; i++) {
                l.push({ name: i, value: i })
            }
            this.typeList.push({
                name: "全部",
                value: ""
            }, ...l.reverse())
        },

        getList() {
            news(this.params).then(res => {
                this.total = res.data.data.total;
                this.pageSize = res.data.data.pageSize;
                this.list = res.data.data.data;
            })
        },
        pageChange(e) {
            this.params.pageNum = 1;
            this.getList();
        },
        YearChange(e) {
            this.params.year = e;
            this.params.pageNum = 1;
            this.getList()
        },
        banners() {
            banner({ type: '0' }).then(res => {
                console.log(res);
                this.bannerList = res.data.data;
            })
        },
        linkUrl(v) {
            if (!v) return;
            window.open(v, '_blank')
        }
    },
    computed: {
        date: function (v) {
            return function (v) {
                let num = {
                    year: "",
                    month: "",
                    week: "",
                    day: ""
                }
                if (v) {
                    let date = new Date(v * 1000)
                    num = {
                        year: date.getFullYear(),
                        month: (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1),
                        week: this.weeks(v),
                        day: (date.getDate() < 10 ? '0' + date.getDate() : date.getDate())
                    }
                }

                return num;
            }
        }
    }
}
</script>

<style lang="less" scoped>
.page {
    width: 51.2rem;
    min-height: 100vh;
    padding-bottom: 2.4rem;
    position: relative;

    .bg {
        pointer-events: none;
        z-index: -1;
    }

    .ball1 {
        width: 0.69rem;
        height: 0.69rem;
        background: url('@/assets/img/balls2_1.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 6.03rem;
        top: 9.04rem;
    }

    .ball2 {
        width: 0.45rem;
        height: 0.45rem;
        background: url('@/assets/img/balls1_3.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 4.16rem;
        top: 14.93rem;
    }

    .ball3 {
        width: 1.39rem;
        height: 1.39rem;
        background: url('@/assets/img/balls1_1.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 6.91rem;
        top: 3.28rem;
    }

    .ball4 {
        width: 0.83rem;
        height: 0.83rem;
        background: url('@/assets/img/balls1_2.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 6.13rem;
        top: 5.52rem;
    }

    .ball5 {
        width: 2.08rem;
        height: 2.11rem;
        background: url('@/assets/img/balls3.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 3.07rem;
        bottom: 8rem;
    }

    .ball6 {
        width: 1.25rem;
        height: 1.28rem;
        background: url('@/assets/img/balls5.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 5.68rem;
        bottom: 6.19rem;
    }

    .ball7 {
        width: 0.93rem;
        height: 0.96rem;
        background: url('@/assets/img/balls4.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 4.13rem;
        bottom: 4.11rem;
    }

    .bg1 {
        width: 6.13rem;
        height: 5.23rem;
        background: url('@/assets/img/officialNotice/bg1.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 0;
        top: 0;
    }

    .bg2 {
        width: 11.25rem;
        height: 7.97rem;
        background: url('@/assets/img/officialNotice/bg2.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 0;
        bottom: 0;
    }

    .bg3 {
        width: 10.35rem;
        height: 10.35rem;
        background: url('@/assets/img/officialNotice/bg3.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 14.8rem;
        bottom: 2.03rem;
    }

    .bg4 {
        width: 12.13rem;
        height: 6.24rem;
        background: url('@/assets/img/officialNotice/bg4.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 4.37rem;
        bottom: 0rem;
    }

    .bg5 {
        width: 9.17rem;
        height: 10.03rem;
        background: url('@/assets/img/officialNotice/translation1.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 0;
        bottom: 12.4rem;
    }

    .bg6 {
        width: 9.17rem;
        height: 10.03rem;
        background: url('@/assets/img/officialNotice/translation1.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 0;
        bottom: 12.4rem;
    }

    .bg7 {
        width: 2.59rem;
        height: 3.25rem;
        background: url('@/assets/img/officialNotice/translation2.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 7.47rem;
        bottom: 1.07rem;
    }
}

.main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .banner {
        width: 51.2rem;
        height: 8rem;
    }

    .list {
        width: 100%;
        padding-top: 0.85rem;
        display: flex;
        align-items: center;
        flex-direction: column;

        .top {
            width: 34.9rem;
            display: flex;
            align-items: center;
            margin-bottom: 0.88rem;
            padding-left: 1.49rem;

            .type {
                font-size: 0.53rem;
                font-family: 'IdeaFonts-DianHei-EEJ', 'IdeaFonts-DianHei';
                font-weight: normal;
                color: #212121;
                line-height: 0.85rem;
                margin-right: 0.53rem;
            }
        }

        .item-list {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;

            li {
                width: 34.99rem;
                height: 7.04rem;
                background: rgba(253, 253, 254, 0.25);
                border: 0.05rem solid #FFFFFF;
                backdrop-filter: blur(10px);
                display: flex;
                align-items: flex-start;
                margin-bottom: 0.85rem;
                position: relative;

                .date {
                    display: flex;
                    align-items: center;
                    margin-left: 1.52rem;
                    margin-top: 0.64rem;
                    margin-right: 1.41rem;

                    .year {
                        writing-mode: vertical-lr;
                        font-size: 0.37rem;
                        font-family: 'Helvetica-Light', 'Helvetica';
                        font-weight: 300;
                        color: #212121;
                        line-height: 0.45rem;
                    }

                    .month {
                        font-size: 1.17rem;
                        font-family: 'SmileySans-Oblique', 'SmileySans';
                        font-weight: normal;
                        color: #212121;
                        line-height: 1.92rem;
                    }

                    .week {
                        width: 0.51rem;
                        height: 0.85rem;
                        position: relative;
                        background: url('@/assets/img/officialNotice/slash.png') no-repeat;
                        background-size: cover;
                        margin-right: 0.22rem;
                    }

                    .week::before {
                        content: attr(data-week);
                        position: absolute;
                        right: -0.20rem;
                        bottom: -0.17rem;
                        font-size: 0.32rem;
                        font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
                        font-weight: normal;
                        color: #68656C;
                        letter-spacing: 1px;
                    }

                    .day {
                        font-size: 1.17rem;
                        font-family: 'SmileySans-Oblique', 'SmileySans';
                        font-weight: normal;
                        color: #212121;
                        line-height: 1.92rem;
                    }
                }

                .content {
                    width: 20.4rem;
                    margin-top: 0.88rem;

                    .title {
                        font-size: 0.59rem;
                        font-family: 'IdeaFonts-DianHei-FEJ', 'IdeaFonts-DianHei';
                        font-weight: normal;
                        color: #212121;
                        line-height: 0.96rem;
                        margin-bottom: 0.85rem;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 1;
                        overflow: hidden;
                    }

                    .text {
                        width: 100%;

                        p {
                            width: 100%;
                            font-size: 0.53rem;
                            font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
                            font-weight: normal;
                            color: #212121;
                            line-height: 0.85rem;
                            letter-spacing: 2px;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 3;
                            overflow: hidden;
                        }
                    }

                }

                .image {
                    width: 5.33rem;
                    height: 5.33rem;
                    margin-left: 1.57rem;
                    margin-top: 0.88rem;

                    .el-image {
                        width: 100%;
                        height: 100%;
                    }
                }


            }

            li::before {
                content: "";
                position: absolute;
                top: -0.05rem;
                left: 50%;
                transform: translateX(-50%);
                width: 32rem;
                height: 0.05rem;
                background-color: #212121;
            }
        }
    }
}
</style>